<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>最新动态</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub user-nav">
		<jsp:include page="include/usernav.jsp"></jsp:include>
	</div>
	<div class="main-wrap">
		<div class="box user-bd">
			<div class="tl u">
				<h3>
					最新动态
				</h3>
			</div>
			<div class="bd">
				<div class="tagsinput">
					<span id="taglist">
						<c:forEach var="tag" items="${tags }">
							<span class="badge tag action">&nbsp;${tag.name }&nbsp;<i class="icon-minus-sign" data="${tag.id }"></i></span>
		                </c:forEach> 
	                </span>
	                <span id="tagsinput_addTag" class="tagsinput-add-container badge">
	                	<input placeholder="新标签" id="tagsinput_tag" style="color: rgb(102, 102, 102); width: 40px;">
	                	<span class="addtag" id="addUserTagBtn"><i class="icon-plus-sign"></i></span>
	                </span>
                </div>
                <div class="timeline" id="timeline">
                	
                </div>
                <div class="btn btn-small btn-block" id="getmore" style="cursor:pointer">更多<input type='hidden' value=0 id="lasttime"/></div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" value="${user.id }" id="currentUserId"/>
<input type="hidden" value="<%=basePath%>" id="baseUrl"/>
<script type="text/javascript">
	$(document).ready(function(){
		listen();
		$("#lasttime").val(0);
		ajaxLoadTimeline();
		
	});
	function listen(){
		$("#addUserTagBtn").click(function(){
			var tagName = $("#tagsinput_tag").val();
			var userId = $("#currentUserId").val();
			if($.trim(tagName)===''){
				return;
			}
			var data = {tagName:tagName,userId:userId};
			$("#addUserTagBtn").find("i").eq(0).html("<img src='img/loading-input.gif' />");
			$.ajax({    
		        type: "POST",  
		        url:"<%=basePath%>user/addtag.json",
		        contentType : 'application/json',
	            data:JSON.stringify(data),
	            dataType:'json',
		        success: function(response){ 
		        	if(response){
		        		if(response.ok){//<span class="badge tag action">&nbsp;${tag.name }&nbsp;<i class="icon-minus-sign" data="${tag.id }"></i></span>
			  				$("#taglist").append("&nbsp;<span class='badge tag action'>&nbsp;"+tagName+"&nbsp;<i class='icon-minus-sign' onclick='removeUserTag(\""+response.data.id+"\",this)'></i></span>");
			  				$("#tagsinput_tag").val('');
			  				$("#addUserTagBtn").find("i").eq(0).html("");
		        		}
		        	}
		        },
			 	error: function(e){    }
			});
		});
		$("#getmore").click(function(){
			ajaxLoadTimeline();
		});
		$("#profile-input").keyup(function(e){
			if(e.keyCode===13){
				saveProfile($("#profile-input").find("i").eq(0));
			}
		});
	}
	function editorProfile(){
		$("#profile-saved").hide();
		$("#profile-editor").show();	
	}
	function changeToSaved(profile){
		$("#profile-saved").show();
		$("#profile-editor").hide();
		$("#profile-saved font").each(function(i,e){
			$(e).html(profile);
		});
	}
	function saveProfile(obj){
		var profile = $("#profile-input").val();
		var data = {"profile":profile};
		$.ajax({    
	        type: "post",  
	        url:"<%=basePath%>user/profilesave.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
	        success: function(response){
				if(response.ok){
					changeToSaved(profile);
				}
	        },
	        error: function(e){}
		});
	}
	
	function ajaxLoadTimeline(){
		var data = {lasttime:$("#lasttime").val()};
		$.ajax({    
	        type: "get",  
	        url:"<%=basePath%>u/timeline.json",
	        contentType : 'application/json',
            data:data,
            dataType:'json',
	        success: function(response){
				if(response.ok){
					
					for(var i=0; i<response.data.length; i++){
						var event = response.data[i];
						if(event.eventName==="question"){
							var html = buildQuestion(event.map);
							$("#timeline").append(html);
						}
						if(event.eventName==="answer"){
							var html = buildAnswer(event.map);
							$("#timeline").append(html);
						}
						if(event.eventName==="article"){
							var html = buildArticle(event.map);
							$("#timeline").append(html);
						}
						if(i==response.data.length-1){
							$("#lasttime").val(event.eventTime);
						}
					}
				}
	        },
	        error: function(e){}
		});
	}
	
	
</script>
<jsp:include page="include/foot.jsp"></jsp:include>
</body>
</html>